/*!
 * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.navigation-controls {
  display: flex;
  align-items: center;
  gap: var(--size-s1);

  margin-left: auto;

  @media (width < $breakpoint-desktop-min) {
    flex-grow: 1;
    justify-content: flex-end;

    background-color: var(--color-text);
    gap: 0;
  }
}

.no-js .navigation-controls {
  display: none;
}

.navigation-controls--btn {
  z-index: 0;

  display: inline-flex;
  align-items: center;

  flex-shrink: 0;
  justify-content: center;

  width: 40px;
  height: 40px;
  padding: 0;

  cursor: pointer;

  border: none;
  border-radius: var(--size-s1);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;

  font-size: 0;
  line-height: 0;

  &:hover {
    background-color: var(--color-w10);
  }

  @media (width < $breakpoint-desktop-min) {
    .navigation-controls &:hover {
      background-color: var(--color-w16);
    }

    .navigation-controls &:active {
      background-color: var(--color-w21);
    }
  }

  &:active {
    background-color: var(--color-w16);
  }

  &:focus-visible {
    outline: var(--focus-outline);
  }

  @media (width < $breakpoint-desktop-min) {
    width: 52px;
    height: 52px;

    border-radius: 0;

    outline-offset: -4px;
  }
}

.navigation-controls--break {
  flex-basis: 100%;
}

.navigation-controls--btn_theme {
  background-image: url('../_assets/theme-toggle.svg');
}

.navigation-controls--btn_homepage {
  background-image: url('../_assets/homepage.svg');
}

.navigation-controls--btn_toc {
  margin-left: auto;

  background-image: url('../_assets/burger.svg');
}

.navigation-controls--btn_go-to-top {
  background-image: url('../_assets/go-to-top-icon.svg');
}
